<template>
    <div class="page">
        <!-- <VoSchemaLayoutForm :model="model" :schema="schema" :rules="rules" @change="formChange">
            <template #operation="scope">
                <el-button type="text" icon="el-icon-remove-outline" @click="handleListDelete(scope)">移除</el-button>
            </template>
        </VoSchemaLayoutForm> -->
        <!-- <div>
            <ve-table :columns="columns" :table-data="tableData" :border-around="false" :border-x="false" :border-y="false" />
        </div> -->
        <VoSchemaForm :schema="schema1" :model="model1" :rules="rules1" @change="form1Change">
            <template #sex="{ model }">
                <div>{{model}}
                    <el-switch v-model="model.sex"></el-switch>
                </div>
            </template>
            <template #_listhead="{ index }">
                <div>
                    第 {{ index + 1 }} 条：
                    <el-button type="primary" size="mini" @click="listRemove(index)">
                        删除
                    </el-button>
                </div>
            </template>
        </VoSchemaForm>
    </div>
</template>
<script>
// import VoSchemaLayoutForm from '@/packages/SchemaForm/LayoutForm.vue'

let id = 0

export default {
    components: {
        // VoSchemaLayoutForm
    },
    data() {
        return {
            msg: '422826199504056642',
            show: false,
            model: {
                list: [
                    {
                        input: '12323',
                        like: '篮球'
                    }
                ]
            },
            schema: {
                properties: [
                    {
                        model: 'layout_table',
                        widget: 'custom',
                        label: '表格布局'
                    },
                    {
                        type: 'table',
                        props: {
                            border: true
                        },
                        properties: [
                            {
                                type: 'tr',
                                properties: [
                                    {
                                        type: 'td',
                                        properties: [
                                            {
                                                type: 'row',
                                                row: {
                                                    gutter: 20
                                                },
                                                properties: [
                                                    {
                                                        type: 'col',
                                                        col: {
                                                            span: 12
                                                        },
                                                        properties: [
                                                            {
                                                                model: 'name1',
                                                                widget: 'input',
                                                                label: '名称1'
                                                            }
                                                        ]
                                                    }, {
                                                        type: 'col',
                                                        col: {
                                                            span: 12
                                                        },
                                                        properties: [
                                                            {
                                                                model: 'name2',
                                                                widget: 'input',
                                                                label: '名称2'
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ]
                                    }, {
                                        type: 'td',
                                        properties: [
                                            {
                                                model: 'ah',
                                                widget: 'input',
                                                label: '爱好'
                                            }
                                        ]
                                    }, {
                                        type: 'td',
                                        properties: [
                                            {
                                                model: 'xl',
                                                widget: 'input',
                                                label: '学历'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                type: 'tr',
                                properties: [
                                    {
                                        type: 'td',
                                        properties: [
                                            {
                                                model: 'xk',
                                                widget: 'inputNumber',
                                                label: '学科'
                                            }
                                        ]
                                    },
                                    {
                                        type: 'td',
                                        properties: [
                                            {
                                                model: 'yw',
                                                widget: 'input',
                                                label: '语文'
                                            }
                                        ]
                                    },
                                    {
                                        type: 'td',
                                        properties: [
                                            {
                                                model: 'sx',
                                                widget: 'input',
                                                label: '数学'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                type: 'tr',
                                properties: [
                                    {
                                        type: 'td',
                                        props: {
                                            colspan: 3
                                        },
                                        attrs: {
                                            colspan: 3
                                        },
                                        properties: [
                                            {
                                                model: 'hb',
                                                widget: 'input',
                                                label: '合并行'
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        model: 'layout_grid',
                        widget: 'custom',
                        label: '栅格布局'
                    },
                    {
                        type: 'row',
                        row: {
                            gutter: 20
                        },
                        properties: [
                            {
                                type: 'col',
                                col: {
                                    span: 6
                                },
                                properties: [{
                                    model: 'col1',
                                    widget: 'input',
                                    label: 'Col1'
                                }]
                            }, {
                                type: 'col',
                                col: {
                                    span: 6
                                },
                                properties: [{
                                    model: 'col2',
                                    widget: 'input',
                                    label: 'Col2'
                                }]
                            }, {
                                type: 'col',
                                col: {
                                    span: 6
                                },
                                properties: [{
                                    model: 'col3',
                                    widget: 'input',
                                    label: 'Col3'
                                }]
                            }, {
                                type: 'col',
                                col: {
                                    span: 6
                                },
                                properties: [{
                                    model: 'col4',
                                    widget: 'input',
                                    label: 'Col4'
                                }]
                            }
                        ]
                    },
                    {
                        model: 'layout_tabs',
                        widget: 'custom',
                        label: '标签布局'
                    },
                    {
                        type: 'tabs',
                        defaultValue: '1',
                        props: {
                            tabPosition: 'top'
                        },
                        properties: [
                            {
                                type: 'tabPane',
                                props: {
                                    label: '标签页1',
                                    name: '1'
                                },
                                properties: [
                                    {
                                        type: 'table',
                                        props: {
                                            border: true
                                        },
                                        properties: [
                                            {
                                                type: 'tr',
                                                properties: [
                                                    {
                                                        type: 'td',
                                                        properties: [
                                                            {
                                                                model: 'tab_1',
                                                                widget: 'input',
                                                                label: 'Tab1'
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        type: 'td',
                                                        properties: [
                                                            {
                                                                model: 'tab_11',
                                                                widget: 'input',
                                                                label: 'Tab11'
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        type: 'td',
                                                        properties: [
                                                            {
                                                                model: 'tab_111',
                                                                widget: 'input',
                                                                label: 'Tab111'
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                type: 'tabPane',
                                props: {
                                    label: '标签页2',
                                    name: '2'
                                },
                                properties: [
                                    {
                                        model: 'tab2',
                                        widget: 'input',
                                        label: 'Tab2'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        model: 'layout_subForm',
                        widget: 'custom',
                        label: '子表单'
                    },
                    {
                        model: 'list',
                        type: 'subForm',
                        title: '列表标题',
                        props: {
                            border: false,
                            showHeader: true
                        },
                        properties: [
                            {
                                model: 'index',
                                widget: 'custom',
                                props: {
                                    type: 'index',
                                    label: '序号',
                                    align: 'center'
                                }
                            },
                            {
                                model: 'input',
                                widget: 'input',
                                // label: '姓名',
                                labelWidth: '0px',
                                props: {
                                    label: '姓名'
                                }
                            },
                            {
                                model: 'like',
                                widget: 'radio',
                                // label: '爱好',
                                labelWidth: '0px',
                                enum: [
                                    { label: '篮球', value: '篮球' },
                                    { label: '足球', value: '足球' },
                                    { label: '棒球', value: '棒球' }
                                ],
                                props: {
                                    label: '爱好'
                                }
                            },
                            {
                                model: 'operation',
                                widget: 'customItem',
                                props: {
                                    label: '操作',
                                    width: 100,
                                    align: 'center'
                                }
                            }
                        ]
                    }
                ],
                ui: {
                    labelPosition: 'right',
                    labelWidth: '80px'
                }
            },
            rules: {
                name1: [
                    { required: true, message: '必填项', trigger: 'blur' }
                ]
            },
            columns: [
                { field: 'name', key: 'a', title: 'Name', align: 'center' },
                { field: 'date', key: 'b', title: 'Date', align: 'left' },
                { field: 'hobby', key: 'c', title: 'Hobby', align: 'right' },
                { field: 'address', key: 'd', title: 'Address', align: 'left' }
            ],
            tableData: [
                {
                    name: 'John',
                    date: '1900-05-20',
                    hobby: 'coding and coding repeat',
                    address: 'No.1 Century Avenue, Shanghai',
                },
                {
                    name: 'Dickerson',
                    date: '1910-06-20',
                    hobby: 'coding and coding repeat',
                    address: 'No.1 Century Avenue, Beijing',
                },
                {
                    name: 'Larsen',
                    date: '2000-07-20',
                    hobby: 'coding and coding repeat',
                    address: 'No.1 Century Avenue, Chongqing',
                },
                {
                    name: 'Geneva',
                    date: '2010-08-20',
                    hobby: 'coding and coding repeat',
                    address: 'No.1 Century Avenue, Xiamen',
                },
                {
                    name: 'Jami',
                    date: '2020-09-20',
                    hobby: 'coding and coding repeat',
                    address: 'No.1 Century Avenue, Shenzhen',
                },
            ],
            cascaderValue: [1, 2, 4],
            cascaderKey: 1,
            options: [],
            props: {
                lazy: true,
                lazyLoad (node, resolve) {
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({ length: level + 1 })
                            .map(item => ({
                                value: ++id,
                                label: `选项${id}`,
                                leaf: level >= 2
                            }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 1000);
                }
            },
            model1: {
                list: [{}]
            },
            schema1: {
                properties: {
                    name: {
                        label: '姓名',
                        widget: 'input',
                        labelWidth: '20px',
                        ui: {
                            placeholder: '请输入姓名',
                            clearable: true,
                            style: {
                                border: '1px solid pink'
                            }
                        }
                    },
                    sex: {
                        label: '性别',
                        widget: 'select',
                        enum: [
                            { label: '男', value: '男' },
                            { label: '女', value: '女' },
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                        }
                    },
                    list: {
                        label: (h, pro) => {
                            return [
                                <span>子表单</span>,
                                <el-button
                                    type="primary"
                                    size="mini"
                                    onClick={() => this.listAdd(pro)}
                                >
                                +新增
                                </el-button>,
                            ]
                        },
                        footer: (h) => {
                            const total = this.model1.list.reduce((t, a) => {
                                t += a.num || 0
                                return t
                            }, 0)
                            return <div class="custom-list-footer">数量：{total}</div>
                        },
                        widget: 'subForm',
                        ui: {
                            // style: {
                            //   border: '1px solid red',
                            // },
                            class: 'custom-list-item',
                            row: {
                                type: 'flex',
                                style: {
                                    'flex-wrap': 'wrap',
                                },
                            },
                            col: {
                                span: 12,
                            },
                        },
                        col: {
                            span: 24,
                        },
                        grid: {
                            row: {
                                gutter: 10,
                                type: 'flex',
                                style: {
                                    'flex-wrap': 'wrap',
                                },
                            },
                            col: {
                                span: 12,
                            },
                        },
                        properties: {
                            _listhead: {
                                widget: 'customItem',
                                col: {
                                    span: 24,
                                },
                            },
                            num: {
                                label: '数量',
                                widget: 'inputNumber',
                                ui: {},
                            },
                            name: {
                                label: (h) => {
                                    return '名称...'
                                },
                                widget: 'input',
                                labelWidth: '20px',
                                ui: {
                                    placeholder: '请输入名称',
                                    clearable: true,
                                    style: {
                                        border: '1px solid green',
                                    },
                                },
                                // col: {
                                //     span: 12
                                // },
                                rules: [{ required: true, message: '请输入', trigger: 'blur' }],
                            },
                            flag: {
                                label: '显示生日',
                                widget: 'select',
                                enum: [
                                    { label: '展示', value: '1' },
                                    { label: '保密', value: '2' },
                                ],
                                ui: {
                                    placeholder: '请选择',
                                },
                            },
                            birthday: {
                                label: '生日',
                                widget: 'datePicker',
                                ui: {
                                    placeholder: '请选择日期',
                                    format: 'yyyy-MM',
                                    valueFormat: 'yyyy-MM',
                                    clearable: true,
                                    style: {
                                        width: '100%',
                                    },
                                },
                                if(model, pro) {
                                    return model.flag === '1'
                                },
                                // col: {
                                //     span: 12
                                // },
                            },
                            sex: {
                                label: '性别',
                                widget: 'custom',
                            },
                        }
                    }
                },
                col: {
                    span: 24
                },
                ui: {
                    labelWidth: '100px',
                    labelPosition: 'top'
                }
            },
            rules1: {
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                list: {
                    birthday: [
                        { required: true, message: '请选择生日', trigger: 'change' }
                    ]
                }
            }
        };
    },
    methods: {
        formChange(e) {
            console.log('change: ', e);
            console.log(this.model);
        },
        handleListDelete({ props }) {
            this.model[props.model].splice(props.index, 1)
        },
        form1Change(e) {
            console.log(e);
            console.log(this.model1);
        },
        listAdd(pro) {
            console.log(pro);
            this.model1.list.push({})
        },
        listRemove(index) {
            this.model1.list.splice(index, 1)
        },
    }
};
</script>

<style lang="scss">
.custom-list-item {
    border: 1px solid gray;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    &:hover {
        border-color: #0094ff;
    }
}
.custom-list-footer {
    width: 100%;
    padding: 10px;
    text-align: right;
}
</style>
<style lang="scss" scoped>
.page{
    width: 1000px;
    margin: 20px auto;
    padding-bottom: 100px;
}
</style>
